<template>
  <div class="fullscreen" ref="appRef" :style="`height:${contentHeight}px`">
    <div class="top">
      <div class="screenTop" @mouseenter="screenShow = true" @mouseleave="screenShow = false">
        <div v-show="screenShow" class="screenBtn" @click="fullScreenBtn">{{
          showBtn ? '全屏' : '关闭'
        }}</div>
      </div>
      <div class="time">
        <timeData />
      </div>
    </div>
    <div class="content">
      <div class="leftDulletin">
        <div class="designTop">
          <div class="design">
            <img src="@/assets/visualized/leftTitle.png" alt="" class="leftTitle" />
            <div class="word">制图进度看板</div>
          </div>
          <div class="colourPrompt">
            <div class="Prompt">
              <div class="block" style="background: #51e392"></div>
              <div class="text-12px">正常</div>
            </div>
            <div class="Prompt">
              <div class="block" style="background: #ffa841"></div>
              <div class="text-12px">预警</div>
            </div>
            <div class="Prompt">
              <div class="block" style="background: #ff5e44"></div>
              <div class="text-12px">超时</div>
            </div>
          </div>
        </div>
        <div>
          <div class="table" :style="`height:${contentHeight - 120}px`">
            <div class="row header">
              <div class="cell">订单号</div>
              <div class="cell">客户代码</div>
              <div class="cell">产品编号</div>
              <div class="cell">产品名称</div>
              <div class="cell">产品规格</div>
              <div class="cell">计划日期</div>
              <div class="cell">交付日期</div>
              <div class="w-120px">计划与实际进度</div>
              <div class="w-600px">图纸设计进度</div>
            </div>
            <div class="rollDesign">
              <Vue3SeamlessScroll
                class="scroll_box"
                :list="designData"
                :limitScrollNum="7"
                :step="0.5"
                :copyNum="2"
                :hover="true"
                style="
                  height: 100%;
                  overflow: hidden;
                  width: 100%;
                  color: #eee;
                  font-size: 18px;
                  text-align: center;
                "
              >
                <div v-loading="designLoading">
                  <div class="designRoll" v-for="(item, index) in designData" :key="index">
                    <div class="row column">
                      <div class="cellTop">
                        <div class="cellColumn">{{ item.orderNumber }}</div>
                      </div>
                      <div class="cellTop">
                        <div class="cellColumn">{{ item.customerCode }}</div>
                      </div>
                      <div class="cellTop">
                        <div class="cellColumn">{{ item.productNumber }}</div>
                      </div>
                      <div class="cellTop">
                        <div class="cellColumn">{{ item.productName }}</div>
                      </div>
                      <div class="cellTop">
                        <div class="cellColumn">{{ item.modelSpecification }}</div>
                      </div>
                      <div class="cellTop">
                        <div class="cellColumn">{{ item.planStartDate }}</div>
                      </div>
                      <div class="cellTop">
                        <div class="cellColumn">{{ item.planEndDate }}</div>
                      </div>
                      <div class="w-120px h-72px">
                        <div class="mt-10px">
                          <div class="text-12px pb-6px">{{ item.scheduleRatio }}%</div>
                          <el-progress
                            :percentage="item.scheduleRatio"
                            :show-text="false"
                            color="#00d2d7"
                          />
                        </div>
                        <div class="mb-10px mt-8px">
                          <div class="text-12px pb-6px">{{ item.actualProgressRatio }}%</div>
                          <el-progress
                            :percentage="item.actualProgressRatio"
                            :show-text="false"
                            color="#51e392"
                          />
                        </div>
                      </div>
                      <div class="flex justify-start w-600px mt-8px mb-8px h-74px">
                        <div
                          class="ml-5px mr-5px"
                          v-for="(details, index) in item.details"
                          :key="index"
                        >
                          <el-progress
                            type="circle"
                            :percentage="details.actualProgressRatio"
                            :width="36"
                            :stroke-width="5"
                            :text-inside="true"
                            :color="customColorMethod(details.status)"
                            :show-text="false"
                          />
                          <div class="className">{{ details.drawingName }}</div>
                          <div class="operator">{{ details.designerPersonName }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </Vue3SeamlessScroll>
            </div>
          </div>
        </div>
      </div>
      <div class="rightDulletin">
        <div class="stateTop">
          <div class="task">
            <img src="@/assets/visualized/task.png" alt="" class="rightTitle" />
            <div class="word">任务状态看板</div>
          </div>
          <div class="taskState">
            <div class="taskStateTop">
              <div class="stateData">
                <div class="data">
                  <div class="title">未开始</div>
                  <div class="digit">{{ taskStatus[9]?.tasks }}</div>
                  <img src="@/assets/visualized/notStarted.png" alt="" />
                </div>
                <div class="data">
                  <div class="title">进行中</div>
                  <div class="digit">{{ taskStatus[3]?.tasks + taskStatus[7]?.tasks }}</div>
                  <img src="@/assets/visualized/have.png" alt="" />
                </div>
                <div class="data">
                  <div class="title">已完成</div>
                  <div class="digit">{{ taskStatus[4]?.tasks }}</div>
                  <img src="@/assets/visualized/completed.png" alt="" />
                </div>
              </div>
              <div class="stateData mt-10px">
                <div class="data">
                  <div class="title">已超时</div>
                  <div class="digit">{{ taskStatus[10]?.tasks }}</div>
                  <img src="@/assets/visualized/timeout.png" alt="" />
                </div>
                <div class="data">
                  <div class="title">已取消</div>
                  <div class="digit">{{ taskStatus[6]?.tasks }}</div>
                  <img src="@/assets/visualized/cancellation.png" alt="" />
                </div>
                <div class="data">
                  <div class="title">已暂停</div>
                  <div class="digit">{{ taskStatus[5]?.tasks }}</div>
                  <img src="@/assets/visualized/suspend.png" alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="completeMiddle">
          <div class="monthly">
            <img src="@/assets/visualized/task.png" alt="" class="rightMonthly" />
            <div class="word">月度完工看板</div>
          </div>
          <div>
            <div>
              <Echart :options="barOptionsData" :height="contentHeight * 0.31" />
            </div>
          </div>
        </div>
        <div class="taskAssign">
          <div class="assign">
            <img src="@/assets/visualized/monthly.png" alt="" class="rightTask" />
            <div class="word">任务指派看板</div>
          </div>
          <div class="assignBoard">
            <div class="table" :style="`height:${contentHeight - 600}px`">
              <div class="row header">
                <div class="cell">设计员</div>
                <div class="cell">任务总数</div>
                <div class="cell">完工数</div>
                <div class="w-120px">月度完工率(%)</div>
              </div>
              <Vue3SeamlessScroll
                class="scroll_box"
                :list="assignData"
                :step="0.4"
                :hover="true"
                :limitScrollNum="4"
                :copyNum="2"
                style="
                  height: 100%;
                  overflow: hidden;
                  width: 100%;
                  color: #eee;
                  font-size: 18px;
                  text-align: center;
                "
              >
                <div v-loading="assignLoading">
                  <div class="roll" v-for="(item, index) in assignData" :key="index">
                    <div class="row column">
                      <div class="cell">{{ item.designerPersonName }}</div>
                      <div class="cell">{{ item.taskTotals }}</div>
                      <div class="cell">{{ item.completeNumber }}</div>
                      <div class="w-120px">{{ item.monthlyCompletionRate * 100 }}</div>
                    </div>
                  </div>
                </div>
              </Vue3SeamlessScroll>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="VisualizedTechniqueDivision">
import * as techniqueDivision from '@/api/visualized/techniqueDivision'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
import { set } from 'lodash-es'
import { calcRate } from '../components/drawMixin'
import timeData from '../components/time.vue'
import { EChartsOption } from 'echarts'
import { barOptions } from './echarts-data'
import * as echarts from 'echarts'
const contentHeight = ref()
contentHeight.value = document.body.clientHeight - 125
const { t } = useI18n()
const appRef = ref()
const screenShow = ref(false) // 全屏显示
const showBtn = ref(true)
const designLoading = ref(false) // 制图进度看板
const designData = ref<any[]>([])
const statusLoading = ref(false) // 任务状态看板
const taskStatus = ref<any[]>([])
const monthlyLoading = ref(false) // 月度完工看板列表
const assignLoading = ref(false) // 任务指派看板
const assignData = ref<any[]>([])

// 制图进度看板
const getDrawingList = async () => {
  designLoading.value = true
  try {
    const data = await techniqueDivision.getTechnologyDrawingProgressList()
    designData.value = data
    console.log(designData.value, '99')
  } finally {
    designLoading.value = false
  }
}

// 制图状态颜色
const customColorMethod = (status) => {
  if (status === 'normal') {
    return '#51e392'
  }
  if (status === 'warning') {
    return '#ffa841'
  }
  if (status === 'time_out') {
    return '#ff5e44'
  }
  return '#67c23a'
}

// 任务状态看板
const getTaskList = async () => {
  statusLoading.value = true
  try {
    const data = await techniqueDivision.getTechnologyTaskStatusList()
    taskStatus.value = data
  } finally {
    statusLoading.value = false
  }
}

// 月度完工看板列表
const machinery = ref<any[]>([])
const electrical = ref<any[]>([])
const getMonthlyList = async () => {
  monthlyLoading.value = true
  try {
    const data = await techniqueDivision.getTechnologyMonthlyCompletion()
    machinery.value = data[10]
    electrical.value = data[20]
    getWeeklyUserActivity()
  } finally {
    monthlyLoading.value = false
  }
}
const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
// 柱状图
const getWeeklyUserActivity = async () => {
  const data1 = machinery.value
  const data2 = electrical.value
  const week = [{ name: '第一周' }, { name: '第二周' }, { name: '第三周' }, { name: '第四周' }]
  set(
    barOptionsData,
    'xAxis.data',
    week.map((v) => t(v.name))
  )
  set(barOptionsData, 'series', [
    {
      name: t('机械出图'),
      barWidth: 20,
      label: {
        normal: {
          show: true,
          position: 'top',
          fontSize: 16,
          color: 'rgba(47,184,255,1)',
          offset: [0, 0]
        }
      },
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(47,184,255,0.4)'
          },
          {
            offset: 1,
            color: 'rgba(47,184,255,1)'
          }
        ])
      },
      data: data1.map((v) => v.completeNumber),
      type: 'bar'
    },
    {
      name: t('电气出图'),
      barWidth: 20,
      label: {
        normal: {
          show: true,
          position: 'top',
          fontSize: 16,
          color: 'rgba(0,198,193,1)',
          offset: [0, 0]
        }
      },
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(0,198,193,0.4)'
          },
          {
            offset: 1,
            color: 'rgba(0,198,193,1)'
          }
        ])
      },
      data: data2.map((v) => v.completeNumber),
      type: 'bar'
    }
  ])
}

//任务指派看板
const getAssignmentList = async () => {
  assignLoading.value = true
  try {
    const data = await techniqueDivision.getTechnologyTaskAssignment()
    assignData.value = data
  } finally {
    assignLoading.value = false
  }
}

// 全屏事件
const fullScreenBtn = () => {
  const el = document.querySelector('.fullscreen')
  if (!document.fullscreenElement) {
    showBtn.value = false
    ;(el as any).requestFullscreen().catch((err) => {
      // 进入全屏模式
      console.log(`进入全屏模式失败：${err.message}`)
    })
  } else {
    showBtn.value = true
    document.exitFullscreen() // 退出
    contentHeight.value = document.body.clientHeight - 127
  }
}

// 全屏退出
document.addEventListener('fullscreenchange', () => {
  if (!document.fullscreenElement) {
    showBtn.value = true
    contentHeight.value = document.body.clientHeight - 127
  }
})

const resize = () => {
  contentHeight.value = document.body.clientHeight
  setTimeout(() => {
    calcRate(appRef)
  }, 200)
}

onMounted(async () => {
  getDrawingList()
  getTaskList()
  getMonthlyList()
  getAssignmentList()
  calcRate(appRef)
})

window.addEventListener('resize', resize)

onBeforeUnmount(() => {
  window.removeEventListener('resize', resize)
})
</script>
<style lang="scss" scoped>
.fullscreen {
  width: 100%;
  padding: 10px;
  background-image: url('@/assets/visualized/techniqueTitle.png');
  background-size: 100% 100%;
  background-origin: padding-box;
  background-clip: border-box;
  background-position: center;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 48px;
    .screenTop {
      width: 40px;
      height: 26px;
      .screenBtn {
        cursor: pointer;
        width: 100%;
        height: 100%;
        text-align: center;
        border: 1px solid #45e0dc;
        border-radius: 5px;
        background: linear-gradient(0deg, #45e0dc 0%, #161f24 59%, #161f24 100%);
        color: #45e0dc;
      }
    }
  }

  .content {
    display: flex;
    .leftDulletin {
      flex: 1;

      .table {
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      .header {
        background-color: rgba(44, 86, 88, 0.4);
        color: #7cc9c2;
        z-index: 10;
      }
      .scroll_box {
        overflow: hidden;
      }
      .column {
        color: #ddd;
        font-size: 14px;
        z-index: 2;
      }
      .designRoll:nth-child(even) {
        background-color: rgba(44, 86, 88, 0.3);
      }

      .className {
        font-size: 12px;
        color: #eee;
      }
      .operator {
        font-size: 12px;
        color: #bbb;
      }

      .row {
        display: flex;
        text-align: center;
        align-items: center;
      }
      .cell {
        flex: 1;
        padding: 5px;
        text-align: center;
        align-items: center;
      }
      .cellTop {
        flex: 1;
        height: 68px;
        padding: 0 10px;
        display: flex; /* 将元素设置为 Flex 容器 */
        align-items: center; /* 让内容垂直居中 */
        justify-content: center; /* 水平居中 */
      }
      .cellColumn {
        word-break: break-all;
        display: -webkit-box;
        -webkit-line-clamp: 3; /* 控制显示的行数 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis; /* 超出部分显示省略号 */
      }

      .designTop {
        display: flex;
        justify-content: space-between;
        .colourPrompt {
          display: flex;
          height: 50px;
          padding-right: 10px;
          .Prompt {
            display: flex;
            align-items: center;
            padding-top: 20px;
            color: #b4cccb;
            margin-left: 10px;
            .block {
              width: 20px;
              height: 10px;
              display: inline-block;
              margin-right: 6px;
              border-radius: 5px;
            }
          }
        }
        .design {
          position: relative;
          .leftTitle {
            width: 650px;
            height: 40px;
          }
          .word {
            position: absolute;
            left: 52px;
            top: 12px;
            color: #d4fffb;
            font-weight: 600;
            font-size: 18px;
            line-height: 22px;
          }
        }
      }
    }
    .rightDulletin {
      width: 25%;
      margin-top: 10px;
      .stateTop {
        .task {
          position: relative;
          .rightTitle {
            width: 400px;
            height: 40px;
          }
          .word {
            position: absolute;
            left: 28px;
            top: 12px;
            color: #d4fffb;
            font-weight: 600;
            font-size: 16px;
            line-height: 22px;
          }
        }
        .taskState {
          .taskStateTop {
            .stateData {
              display: flex;
              justify-content: space-evenly;
              .data {
                position: relative;
                text-align: center;
                .title {
                  font-size: 12px;
                  font-weight: 300;
                  color: #c3c2c2;
                  line-height: 22px;
                  height: 22px;
                  margin-bottom: 15px;
                }
                .digit {
                  position: absolute;
                  top: 15px;
                  left: 50%;
                  transform: translateX(-50%);
                  font-size: 24px;
                  font-weight: 700;
                  color: #ffffff;
                }
                img {
                  width: 90px;
                  height: 32px;
                }
              }
            }
          }
        }
      }
      .completeMiddle {
        margin-top: 15px;
        .monthly {
          position: relative;
          .rightTitle {
            width: 400px;
            height: 40px;
          }
          .word {
            position: absolute;
            left: 28px;
            top: 12px;
            color: #d4fffb;
            font-weight: 600;
            font-size: 16px;
            line-height: 22px;
          }
        }
      }
      .taskAssign {
        .assign {
          position: relative;
          .rightTask {
            width: 400px;
            height: 40px;
          }
          .word {
            position: absolute;
            left: 28px;
            top: 12px;
            color: #d4fffb;
            font-weight: 600;
            font-size: 16px;
            line-height: 22px;
          }
        }
        .assignBoard {
          margin-left: 10px;
          .table {
            display: flex;
            flex-direction: column;
          }
          .header {
            background-color: rgba(44, 86, 88, 0.4);
            color: #7cc9c2;
            z-index: 10;
          }
          .scroll_box {
            overflow: hidden;
          }
          .column {
            color: #ddd;
            font-size: 14px;
            z-index: 2;
          }
          .roll:nth-child(even) {
            background-color: rgba(44, 86, 88, 0.3);
          }
          .row {
            display: flex;
            text-align: center;
            align-items: center;
          }
          .cell {
            flex: 1;
            padding: 5px;
            text-align: center;
            align-items: center;
            word-wrap: break-word;
          }
        }
      }
    }
  }
}

:deep(.el-progress-bar__outer) {
  background-color: rgba(44, 86, 88, 0.5) !important;
}

:deep(.el-progress-circle__track) {
  stroke: rgba(44, 86, 88, 0.5);
}

// :deep(.el-progress-circle__track),
// :deep(.el-progress-circle__track) {
//   border-radius: inherit;
// }
// @keyframes scroll {
//   from {
//     transform: translateY(0);
//   }
//   to {
//     transform: translateY(-100%);
//   }
// }

// .rollDesign {
//   animation: scroll 10s linear infinite;
//   display: inline-block;
//   white-space: nowrap;
// }

// .rollDesign:hover {
//   animation-play-state: paused;
// }
</style>
